import React, { useState, useMemo } from 'react';
import './style.less';
import classNames from "classnames";
import { useCallback } from 'react';

const Tab = ({setTabType,tab}) => {
  const [TabKey, setTabKey] = useState(tab);
  const changeTab = useCallback((key) => {
    if(TabKey !== key) {
      setTabKey(key);
      setTabType(key)
    }
 
  }, [TabKey, setTabType])
  const imgList = useMemo(() => {
    return [
      [require('../../assests/img/protab1-0.png'), require('../../assests/img/protab1-1.png'),],
      [require('../../assests/img/protab2-0.png'), require('../../assests/img/protab2-1.png'),],
    ]
  }, []);
  return <div className="ProductInfo-Tab">
    <div className={classNames('ProductInfo-Tab-item',{currentTab:TabKey===0})} onClick={() => {changeTab(0)}}>
      <img src={imgList[0][TabKey === 0 ? 1 : 0]} alt="" />
      <span>产品知识</span>
    </div>
    <div className={classNames('ProductInfo-Tab-item',{currentTab:TabKey===1})} onClick={() => {changeTab(1)}}>
      <img src={imgList[1][TabKey === 1 ? 1 : 0]} alt="" />
      <span>医学知识</span>
    </div>
  </div>
}


export default React.memo(Tab)